<template>
  <div id="app" :class="'theme-' + theme">
    <router-view/>
  </div>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import { State } from 'vuex-class'
  import 'swiper/dist/css/swiper.min.css'
  import jQuery from 'jquery'

  @Component
  export default class App extends Vue {
    @State theme

    mounted () {
      const width = jQuery(window).width();
      console.log(width)
      if (width > 320) {
        const pixel = (width / 750) * 32;
        jQuery('html').css('font-size', pixel + 'px');
      }
    }
  }
</script>

<style lang="less">
@import (reference) "~@/less/resources.less";
body {
  margin: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
.icon {
    width: 1rem; height: 1rem;
    vertical-align: -0.15rem;
    fill: currentColor;
    overflow: hidden;
}
.theme(@font-color){
  a:hover, a:visited, a:link, a:active {
      text-decoration: none;
      color: @font-color;
  }
}
.theme-default{
  color: @default-font-color;
  background-color: @default-background-color;
  .theme(@default-font-color)
}
.theme-dark{
  color: @dark-font-color;
  background-color: @dark-background-color;
  .theme(@dark-font-color)
}
</style>
